<template>
	<el-container class="pvue-container">
	  	<el-aside :style="{width:isCollapse?'65px':'200px'}">
	  		<sidebar></sidebar>
	  	</el-aside>
	  	<el-container>
	    	<el-header height="64px;">
	    		<h1>中国质量认证中心</h1>
	    		<top></top>	
	    		<div class="pvue_tabs"> 
	    			<span class="iconfont " :class="isCollapse?'el-spread-copy':'el-spread0000'" @click="collectBtn"></span>
					<tabs :tabs="tabs" :tabIndex="tabIndex" :tabsActive="tabsActive"></tabs>
					<div  class="close_tab_drop">
						<el-dropdown  @command="handleCommand">
						  <el-button type="primary" size="mini" >
						    更多<i class="el-icon-arrow-down el-icon--right"></i>
						  </el-button>
						  <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item command="all">关闭全部</el-dropdown-item>
						    <!-- <el-dropdown-item>狮子头</el-dropdown-item> -->
						  </el-dropdown-menu>
						</el-dropdown>
					</div>	
	    		</div>
					
	    	</el-header>
	    	<el-main>
	    		<router-view />
	    	</el-main>
	  	</el-container>
	</el-container>
</template>
<script>
	import { mapGetters } from 'vuex' 
	import top from './top/'
	import tabs from './tabs/'
	import sidebar from './sidebar/'
	export default {
		name:'index',
		components:{
			top,
			tabs,
			sidebar
		},
		data(){
			return {
				tabs:[{
		        	name:'1',
		        	title:'首页'
		        }],
		        tabIndex:20,
		        tabsActive:'1'
		    }
		},
		computed:{
			...mapGetters(['isCollapse'])
		},
		methods:{
			login(){
				let params = {
					username:'liuli',
					password:'cqc123',
					code:1234
				}
				this.$notify({
		          message: '发送请求！',
		          type: 'success'
		        });
				this.$store.dispatch('LoginByUsername',params)
			},
			addTab(targetName) {
		        let newTabName = ++this.tabIndex + '';
		        this.tabs.push({
		          title: 'New Tab',
		          name: newTabName,
		          content: 'New Tab content'
		        });
		        this.tabsActive = newTabName;
		    },
			handleCommand(val){
				// console.log(val)
			},
			collectBtn(){
				this.$store.commit('setCollapse',true);	
			}
		}
	}
</script>
<style scoped>
	.pvue-container{
		height: 100%;
	}
	.el-aside{
		transition: all .5s;
	}
	.el-header {
	    background:url('/static/img/title_bg.png') no-repeat;
	    background-size: cover;
	    color: #333;
	    position: relative;
	    height:108px;
	    padding:0;
	}
	h1{
		font-weight:400;
		color:#fff;
		text-align: center;
		height: 64px;
		line-height: 64px;
	}
	.el-main{
	    padding:20px;
	    display: -ms-flexbox;
	    display: flex;
	}
</style>